<template>
    <div class="food-form">
      <h2>上传美食信息</h2>
      <form @submit="submitFood">
        <div class="form-group">
          <label for="foodName">美食名称:</label>
          <input type="text" id="foodName" v-model="food.name" required class="form-control">
        </div>
        <div class="form-group">
          <label for="foodcontent">美食描述:</label>
          <textarea id="foodcontent" v-model="food.content" required class="form-control"></textarea>
        </div>
        <div class="form-group">
          <label for="foodMake">美食具体内容:</label>
          <input type="text" id="foodMake" v-model="food.detail" required class="form-control">
        </div>
        <div class="form-group">
          <label for="foodImage">美食图片</label>
          <input type="file" id="foodImage" @change="previewImage" class="form-control" accept="image/*">
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary">上传美食</button>
        </div>
      </form>
      <div v-if="food.image" class="preview-image">
        <h3>预览图片:</h3>
        <img :src="food.image" alt="美食预览" class="img-preview">
      </div>
    </div>
  </template>
  
  <script>
import { getDate } from '@/utils/getDate';
import axios from 'axios';
axios.defaults.baseURL="http://localhost:8087"
  export default {
    data() {
      return {
        food: {
          name: '',
          content: '',
          image: null,
          detail:null
        },
        
      };
    },
    methods: {
      previewImage(event) {
        const file = event.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = (e) => {
            this.food.image= e.target.result;
          };
        }
      },
      

      submitFood() {
        // 在这里处理表单提交，例如上传图片到服务器
        let userid=sessionStorage.getItem("userid")
        
        if(userid)
        {
          let objectid=null
          axios.get(`/findObject_total/1`).then(res=>{
          //   axios.post(`/insertobject?type=1&objectid=`+(res.data.total+1)+'&name='+this.food.name+'&image='+'&content='+this.food.content+'&detail='+this.food.detail).then(res=>{
          //     console.log(res.data)
          //   })
            objectid=res.data.total+1
            axios({
              url:'/insertobject',
              method:'post',
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
              },
              data:`type=1&objectid=`+objectid+'&name='+this.food.name+'&image='+encodeURIComponent(this.food.image)+'&content='+this.food.content+'&detail='+this.food.detail
          }).then(res=>{
            // axios.post(`/insertupload?uploadid=`+userid+`&type=1&objectid=`+objectid+`&uploadtime=`+getDate()).then(res=>{
            //   console.log(res.data)
            // })
            axios({
              url:'/insertupload',
              method:'post',
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
              },
              data:`uploadid=`+userid+`&type=1&objectid=`+objectid+`&uploadtime=`+getDate()
            }).then(res=>{
              console.log(res.data)
            })
            alert('美食信息已提交，即将上传图片到服务器...');
            // 重置表单
            this.food = {
              name: '',
              content: '',
              image: null,
              detail:null
            };
            console.log(res.data)
          })
          })
          
          
        }
        else{
          alert("请先登录");
          this.$router.push({
            name:'login'
          })
        }
        
      }
    }
  };
  </script>
  
  <style scoped>
  .food-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f7f7f7;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  label {
    display: block;
    font-weight: bold;
  }
  
  input[type="text"],
  textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
  }
  
  input[type="file"] {
    display: none;
  }
  
  .btn {
    padding: 10px 20px;
    background-color: #bff;
    border: none;
    color: black;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .preview-image {
    margin-top: 20px;
  }
  
  .img-preview {
    max-width: 100%;
    height: auto;
  }
  </style>
  